/* eslint-disable no-unused-vars,object-curly-spacing,prefer-destructuring,indent,no-plusplus,semi,react/no-unused-state,react/sort-comp,react/jsx-indent-props,react/jsx-indent,react/jsx-tag-spacing,react/jsx-curly-spacing,max-len,jsx-quotes */
import React, {Fragment} from 'react';
import {connect} from 'dva';
import {Layout, Menu, Breadcrumb, Icon, Tooltip, Avatar, Table} from 'antd';
import styles from './HomeLayout.less';

const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
const columns = [{
    title: 'Name',
    dataIndex: 'name',
}, {
    title: 'Age',
    dataIndex: 'age',
}, {
    title: 'Address',
    dataIndex: 'address',
}]

const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward king ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    })
}

class HomeLayout extends React.PureComponent {
    state = {
        collapse: false,
        selectedRowKeys: [], // Check here to configure the default column
    };
    onSelectChange = (selectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({selectedRowKeys});
    }

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({collapsed});
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        const {selectedRowKeys} = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            hideDefaultSelections: true,
            selections: [{
                key: 'all-data',
                text: 'Select All Data',
                onSelect: () => {
                    this.setState({
                        selectedRowKeys: [...Array(46).keys()], // 0...45
                    });
                },
            }, {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    this.setState({selectedRowKeys: newSelectedRowKeys});
                },
            }, {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    this.setState({selectedRowKeys: newSelectedRowKeys});
                },
            }],
            onSelection: this.onSelection,
        };
        return (
            <Layout style={{minHeight: '100vh'}}>
                <Sider
                    collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse}
                >
                    <div className={ styles.logo }/>
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                        <Menu.Item key="1">
                            <Icon type="pie-chart"/>
                            <span>Option 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="desktop"/>
                            <span>Option 2</span>
                        </Menu.Item>
                        <SubMenu
                            key="sub1"
                            title={<span><Icon type="user"/><span>User</span></span>}
                        >
                            <Menu.Item key="3">Tom</Menu.Item>
                            <Menu.Item key="4">Bill</Menu.Item>
                            <Menu.Item key="5">Alex</Menu.Item>
                        </SubMenu>
                        <SubMenu
                            key="sub2"
                            title={<span><Icon type="team"/><span>Team</span></span>}
                        >
                            <Menu.Item key="6">Team 1</Menu.Item>
                            <Menu.Item key="8">Team 2</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="9">
                            <Icon type="file"/>
                            <span>File</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{background: '#fff', padding: 0}}>
                        <Icon
                            className={styles.trigger}
                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                        <div style={{float: 'right'}}>
                            <Icon
                                type='search'
                                className={ styles.topIcon }
                            />
                            <Icon
                                type='appstore-o'
                                className={ styles.topIcon }
                            />
                            <Tooltip placement="bottom" title="最大化">
                                <Icon
                                    type='arrows-alt'
                                    className={ styles.topIcon }
                                />
                            </Tooltip>
                            <Avatar size="large" style={{margin: '0px 10px 0px 20px', cursor: 'pointer'}}>
                                <Icon
                                    type='user'
                                    className={styles.loginPic}
                                />
                            </Avatar>
                        </div>
                    </Header>
                    <Content style={{margin: '0 16px'}}>
                        <Breadcrumb style={{margin: '16px 0'}}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
                            <Table rowSelection={rowSelection} columns={columns} dataSource={data} scroll={{ y: 400 }}/>
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>
                        Ant Design ©2016 Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        )
    }
}

export default connect(({user, global, loading}) => ({
    HomeLayout,
}))(HomeLayout);
